<template>
  <div class="pet-info">
    <h1>New faces</h1>
      <div class="pet-info-item">
        <el-card v-for="i in petList" :key="i.No">
          <img :src="i.url" class="image" @click="toDetail(i)" />
          <div style="padding: 14px">
            <span style="color: #606266">NO：{{ i.No }}</span
            ><br />
            <span style="color: #606266">{{ i.name }}</span
            ><br />
            <span style="color: #f56c6c">价格：{{ i.price }}</span>

            <div class="bottom clearfix">
              <el-button type="text" class="button" @click="toDetail(i)">详细>></el-button>
            </div>
          </div>
        </el-card>
      </div>
  </div>
</template>

<script>
export default {
  name: 'InfoView',
  // props: ['petList'],
  data() {
    return {
      petList: [],
    }
  },
  // async awiat 解决异步问题
  async mounted() {
    await this.$store.dispatch('getPetInfoList')
    this.petList = this.$store.state.petList
  },
  // vuex中action是异步函数 这样使用 需要手动刷新才能渲染页面
  // mounted() {
  //   this.$store.dispatch('getPetInfoList')
  //   this.petList = this.$store.state.petList
  // },
  methods: {
    toDetail(i) {
      this.$router.push({
        name: 'info',
        params: {
          No: i.No,
          name: i.name,
          url: i.url,
          pStatus: i.pStatus,
          sex: i.sex,
          birthday: i.birthday,
          breed: i.breed,
          blood: i.blood,
          price: i.price,
          features: i.features,
        },
      })
      const petData = {
        No: i.No,
        name: i.name,
        url: i.url,
        pStatus: i.pStatus,
        sex: i.sex,
        birthday: i.birthday,
        breed: i.breed,
        blood: i.blood,
        price: i.price,
        features: i.features,
      }
      this.$store.commit('setPetData', petData)
    },
  },
}
</script>

<style scoped>

.el-card {
  width: 300px;
  float: left;
  margin: 10px;
}
.image {
  width: 100%;
  height: 300px;
  border-radius: 20px;
}
h1 {
  color: rgb(152, 103, 61);
}
.pet-info {
  width: 1400px;
  margin: 0 auto;
}
.pet-info-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
</style>
